<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="个人信息"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <div class="user-info-box">
                <div
                    class="user-info-item"
                    @click="uploadHeader"
                >
                    <div class="user-info-name">头像</div>
                    <div class="user-info-detail">
                        <img
                            class="user-header-img"
                            :src="userInfo.face"
                        />
                    </div>
                    <img
                        class="more-icon"
                        src="@/assets/images/userCenter/more.png"
                    />
                </div>
                <div
                    class="user-info-item"
                    @click="goUserName(userInfo.nick_name)"
                >
                    <div class="user-info-name">名字</div>
                    <div class="user-info-detail">{{userInfo.nick_name}}</div>
                    <img
                        class="more-icon"
                        src="@/assets/images/userCenter/more.png"
                    />
                </div>
                <div
                    class="user-info-item"
                    @click="goUserSex"
                >
                    <div class="user-info-name">性别</div>
                    <div class="user-info-detail">{{['','男','女'][userInfo.sex]}}</div>
                    <img
                        class="more-icon"
                        src="@/assets/images/userCenter/more.png"
                    />
                </div>
                <div
                    class="user-info-item"
                    @click="goUserBirthday"
                >
                    <div class="user-info-name">生日</div>
                    <div class="user-info-detail">{{userInfo.birthday}}</div>
                    <img
                        class="more-icon"
                        src="@/assets/images/userCenter/more.png"
                    />
                </div>
                <div class="user-info-item">
                    <div class="user-info-name">手机号码</div>
                    <div class="user-info-detail">{{userInfo.mobile_phone}}</div>
                    <img
                        class="more-icon"
                        src="@/assets/images/userCenter/more.png"
                    />
                </div>
                <div
                    class="user-info-item"
                    @click="goMyCode"
                >
                    <div class="user-info-name">我的二维码</div>
                    <div class="user-info-detail"></div>
                    <img
                        class="more-icon"
                        src="@/assets/images/userCenter/more.png"
                    />
                </div>
            </div>

        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
import wx from 'weixin-js-sdk'
export default {
    name: 'UserInfo',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '0'
            },
            userInfo: ''
        }
    },
    mounted() {
        this.getUserInfo()
    },
    methods: {
        getUserInfo() {
            this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        },
        goMyCode() {
            this.$router.push('/userInfo/myCode')
        },
        goUserName(value) {
            this.$router.push({
                path: '/userInfo/userName',
                query: {
                    userName: value
                }
            })
        },
        goUserSex() {
            this.$router.push('/userInfo/userSex')
        },
        goUserBirthday() {
            this.$router.push('/userInfo/userBirthday')
        },
        uploadHeader() {
            const that = this
            let ios
            let ua = navigator.userAgent.toLowerCase()
            if (ua.match(/iphone/i) == 'micromessenger') {
                ios = true
            } else {
                ios = false
            }
            wx.chooseImage({
                count: 1, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function(res) {
                    let localIds = res.localIds
                    wx.uploadImage({
                        localId: localIds[0],
                        isShowProgressTips: 1,
                        success: function(res) {
                            let serverId = res.serverId
                            let postData = that.qs.stringify({
                                face: serverId
                            })
                            that.axios
                                .post('/api/user/info/update.json', postData)
                                .then(res => {
                                    const data = res.data
                                    if (data.status == 1) {
                                        window.location.reload()
                                    } else {
                                        that.commonDialog.alert('提示', data.msg)
                                    }
                                })
                        }
                    })
                }
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
.user-info-box
    padding-left 0.33rem
    background #fff
    .user-info-item
        display flex
        align-items center
        padding 0.37rem 0.33rem 0.37rem 0.18rem
        border-bottom 1px solid #e5e5e5
        .user-info-name
            font-size 0.33rem
            color #333
        .user-info-detail
            flex 1
            text-align right
            font-size 0.33rem
            color #666
            .user-header-img
                width 1.2rem
                height 1.2rem
                border-radius 100%
        .more-icon
            width 0.2rem
            margin-left 0.37rem
    .user-info-item:last-child
        border none
</style>


